<template>
  <div>
    <div class="advertise-pop" v-if="!isPay">
      <div class="advertise-photo">
        <img src="../assets/images/spicy.jpg" />
      </div>
      <div style="margin: auto 10px">
        <div class="goods-messages">
          <div class="goods-price">
            <p>￥<span style="font-size: 24px">5.1</span>起</p>
          </div>
          <p style="font-weight: 600; font-size: 16px; margin-top: 5px">
            辣条零食大礼包多种混合大全组合怀旧儿时辣片网红8090回忆小包装
          </p>
          <div style="display: flex; margin-top: 8px">
            <img src="../assets/images/spicy.jpg" class="goods-boss" /><span
              class="boss-name"
              >叶大大推荐</span
            >
          </div>
        </div>
        <div class="goods-safeguard">
          <div class="safeguard" @click="openStatement()">
            <span class="sort">保障</span>
            7天无理由退货·极速退款·假一赔四<span
              class="el-icon-arrow-right"
              style="line-height: 30px; right: 0px; position: absolute"
            ></span>
          </div>
          <div class="logistics">
            <span class="sort">物流</span
            ><span>现货</span>48小时内从河北省发货，包邮
          </div>
        </div>
        <div class="goods-store">
          <div class="store-photo">
            <img src="../assets/images/spicy.jpg" />
          </div>
          <div class="store-ifo">
            <h4 style="font-weight: 500">哈喇子流一地</h4>
            <div class="authentication">
              <img src="../assets/images/authentication1.png" /><img
                src="../assets/images/authentication2.png"
                style="marign-left: 5px"
              />
            </div>
          </div>
        </div>
        <div style="text-align: center">
          <img src="../assets/images/product-detail.png" class="goods-line" />
        </div>
        <div class="product-sppdetails">
          <h3 style="font-weight: 500">商品参数</h3>
          <div class="sppdetails-lis">
            <span>是否临期</span>
            <p>否</p>
          </div>
          <div class="sppdetails-lis">
            <span>贮存条件</span>
            <p>常温</p>
          </div>
          <div class="sppdetails-lis">
            <span>食品生产许可证编号</span>
            <p>SC12432032302067</p>
          </div>
          <div class="sppdetails-lis">
            <span>净含量</span>
            <p>15g</p>
          </div>
          <div class="sppdetails-lis">
            <span>生产企业名称</span>
            <p>徐州湘味食品生产有限公司</p>
          </div>
        </div>
      </div>
      <div class="photo-details">
        <div class="advertise-photo">
          <img src="../assets/images/spicy.jpg" />
        </div>
        <div class="advertise-photo">
          <img src="../assets/images/spicy.jpg" />
        </div>
        <div class="advertise-photo">
          <img src="../assets/images/spicy.jpg" />
        </div>
        <div class="advertise-photo">
          <img src="../assets/images/spicy.jpg" />
        </div>
      </div>
      <div class="shop-car">
        <div class="shop-carbox">
          <div class="car-p">
            辣条零食大礼包多种混合大全组合怀旧儿时辣片网红8090回忆小包装
          </div>
          <div>
            <el-button
              type="danger"
              size="small"
              class="el-icon-shopping-cart-2"
              @click="goPay()"
              >立即购买</el-button
            >
          </div>
        </div>
      </div>
      <div class="guarantee-drawer">
        <el-drawer
          title="我是标题"
          class="guarantee"
          :visible.sync="statementdrawer"
          :direction="direction2"
          :before-close="handleExit()"
          :with-header="false"
          :append-to-body="true"
          :modal-append-to-body="false"
          :close-on-click-modal="false"
        >
          <div class="statement-box">
            <p class="safe-statement">保障说明</p>
            <div class="statement-details">
              <div class="statement-lis">
                <div class="statement-pictures">
                  <img src="../assets/images/full-return.png" />
                </div>
                <div class="state-left">
                  <h3>7天无理由退货</h3>
                  <p>符合相应条件时，消费者可申请7天无理由退货</p>
                </div>
              </div>
              <div class="statement-lis">
                <div class="statement-pictures">
                  <img src="../assets/images/quick-refund.png" />
                </div>
                <div class="state-left">
                  <h3>极速退款</h3>
                  <p>
                    满足相应条件时，待发货状态下，提交退款申请将免审核立即退款
                  </p>
                </div>
              </div>
              <div class="statement-lis">
                <div class="statement-pictures">
                  <img src="../assets/images/fake.png" />
                </div>
                <div class="state-left">
                  <h3>假一赔四</h3>
                  <p>
                    若商品鉴定为假货，商家支持假一赔四，且承担商品的鉴定费和退回的运费
                  </p>
                </div>
              </div>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
    <div v-else>
      <div class="pay-pop">
        <div>
          <i
            class="el-icon-arrow-left"
            style="font-weight: 600"
            @click="goPay()"
          ></i>
        </div>
        <div class="penson-message">
          <div class="address-select">
            <div style="line-height: 1.6; width: 92%">
              <p style="font-size: 13px; color: #9c9c9c">
                {{ currentAddressInfo.receiverProvince }}&nbsp;{{
                  currentAddressInfo.receiverCity
                }}&nbsp;{{ currentAddressInfo.receiverDistrict }}
              </p>
              <p>{{ currentAddressInfo.receiverAddress }}</p>
              <p style="font-size: 13px">
                {{ currentAddressInfo.receiverName }}&nbsp;{{
                  currentAddressInfo.receiverPhone
                }}
              </p>
            </div>
            <div>
              <i
                class="el-icon-arrow-right address-more"
                @click="openAddress()"
              ></i>
            </div>
          </div>
          <div class="line-info"></div>
        </div>
        <div class="order-information">
          <div class="store-information">
            <div style="display: flex">
              <div style="margin-right: 3px">
                <img src="../assets/images/spicy.jpg" class="store-size" />
              </div>
              哈喇子流一地
            </div>
            <div class="presenter">@叶大大推荐</div>
          </div>
          <div class="product-information">
            <div>
              <img src="../assets/images/spicy.jpg" class="product-picture" />
            </div>
            <div style="margin-left: 8px; line-height: 1.5">
              <p class="product-name">
                辣条零食大礼包多种混合大全组合怀旧儿时辣片网红8090回忆小包装
              </p>
              <p style="color: #939393; font-size: 12px">
                40包【精美礼袋升级款】
              </p>
              <div
                style="
                  margin-top: 10px;
                  display: flex;
                  justify-content: space-between;
                "
              >
                <div class="product-price">￥9.99</div>
                <div class="product-number">x1</div>
              </div>
            </div>
          </div>
          <div class="freight">
            <span>订单运费</span><span class="exemption">包邮</span>
          </div>
          <div class="notes">
            <span>订单留言</span
            ><el-input
              placeholder="选填，建议先与商家协商一致 >"
              v-model="note"
              class="notes-word"
            ></el-input>
          </div>
        </div>
        <div class="pay-way">
          <div style="display: flex">
            <div>
              <img src="../assets/images/ailpay.png" class="ailpay-size" />
            </div>
            <p style="margin-left: 3px; font-size: 12px; line-height: 20px">
              支付宝支付
            </p>
            <input
              name="pay"
              class="payment-radio"
              required
              type="radio"
              checked="true"
            />
          </div>
        </div>
      </div>
      <div class="pay-sucess">
        <div style="color: #ea4c67; font-size: 16px; font-weight: 600">
          ￥9.99
        </div>
        <div class="submit-order">
          <el-button
            type="danger"
            size="small"
            class="el-icon-shopping-cart-2"
            @click="submitOrder()"
            >提交订单</el-button
          >
        </div>
      </div>
      <div class="address-drawer">
        <el-drawer
          title="我是标题"
          class="address"
          :visible.sync="addressdrawer"
          :direction="direction2"
          :before-close="handleExit()"
          :with-header="false"
          :append-to-body="true"
          :modal-append-to-body="false"
          :close-on-click-modal="false"
        >
          <div class="further-address">
            <h4 class="delivery-address">
              收货地址<i
                class="el-icon-warning-outline"
                style="margin-left: 3px"
              ></i>
            </h4>
            <div
              class="address-box"
              v-for="(item, index) in userOrderInfo.userAddressList"
              :key="item.userId"
            >
              <div class="detail-address" @click="selectAddress(index)">
                <p style="font-size: 13px; color: #9c9c9c">
                  {{ item.receiverProvince }}&nbsp;{{
                    item.receiverCity
                  }}&nbsp;{{ item.receiverDistrict }}&nbsp;
                </p>
                <p style="font-size: 15px">
                  {{ item.receiverAddress }}
                </p>
                <p style="font-size: 13px">
                  {{ item.receiverName }}&nbsp;<span style="color: #9c9c9c">{{
                    item.receiverPhone
                  }}</span>
                </p>
              </div>
              <div class="check-address">
                <i :class="currentAdrrIdx == index ? 'el-icon-check' : ''"></i>
              </div>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserOrderApi, getPayConfirmApi } from "@/api/order";
export default {
  data() {
    return {
      note: "",
      productId: 1,
      productInfo: {},
      isPay: false,
      statement: false,
      address: false,
      currentAddressInfo: {},
      currentAdrrIdx: 0,
      addressdrawer: false,
      statementdrawer: false,
      direction2: "btt",
      size: "377px",
      userAddressList: [],
      userOrderInfo: {},
      userInfo: this.$store.state.userInfo,
    };
  },
  created() {
    this.getUserOrderInfoFun();
  },
  methods: {
    getUserOrderInfoFun() {
      getUserOrderApi({
        userId: this.userInfo.userId,
        productId: this.productId,
      }).then((res) => {
        console.log(res, "已获取getUserOrderInfo");
        if (res.data.code == 200) {
          console.log(res.data.data, "userOrderInfo");
          this.userOrderInfo = res.data.data;
          this.currentAddressInfo = this.userOrderInfo.userAddressList[0];
          this.productInfo = {
            productName:
              "辣条零食大礼包多种混合大全组合怀旧儿时辣片网红8090回忆小包装",
            productImage: "",
            productDes: "40包【精美礼袋升级款】",
            productPrice: 9.99,
            productCount: 1,
          };
        }
      });
    },
    selectAddress(index) {
      this.currentAdrrIdx = index;
      this.currentAddressInfo = this.userOrderInfo.userAddressList[index];
    },
    goPay() {
      this.isPay = !this.isPay;
    },
    submitOrder() {
      getPayConfirmApi({
        subject: "2q35ws4ey5drut",
        orderSn: "1234567890-",
        totalPrice:
          this.productInfo.productPrice,
      }).then((resp) => {
        this.$router.push({path: "/pay", query: {formData: resp.data}})
      });
    },
    handleExit(done) {
    },
    openStatement() {
      this.statementdrawer = !this.statementdrawer;
      this.statement = !this.statement;
    },
    openAddress() {
      this.addressdrawer = !this.addressdrawer;
      this.address = !this.address;
    },
    handleClose(done) {
      this.statement = false;
      this.statementdrawer = false;
    },
  },
};
</script>

<style>
.advertise-pop {
  color: #000;
  position: relative;
}
.advertise-photo img {
  width: 100%;
  height: 330px;
}
.goods-price {
  display: flex;
  color: red;
  font-weight: 600;
}
.goods-messages {
  margin-top: 5px;
  background: #ffffff;
  padding: 10px;
}
.goods-boss {
  width: 16px;
  height: 16px;
}
.boss-name {
  font-size: 12px;
  color: #b3b3b3;
  margin-left: 8px;
}
.goods-safeguard {
  background: #ffffff;
  padding: 10px 12px;
  box-sizing: border-box;
  border-radius: 8px;
  margin-top: 18px;
  font-size: 14px;
}
.safeguard,
.logistics {
  display: flex;
  height: 30px;
  line-height: 30px;
}
.safeguard {
  position: relative;
  cursor: pointer;
}
.sort {
  color: #b3b3b3;
  width: 30px;
  display: block;
  margin-right: 10px;
}
.goods-store {
  display: flex;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 8px;
  margin-top: 18px;
  background: #ffffff;
}
.store-photo img {
  width: 40px;
  height: 40px;
  border-radius: 90%;
}
.store-ifo {
  width: 62%;
  margin-left: 6px;
}
.authentication {
  display: flex;
  margin-top: 10px;
}
.authentication img {
  height: 16px;
}
.store-promise {
  color: #b4b2b2;
  font-size: 13px;
  margin: 4px 0;
}
.goods-line {
  height: 25px;
  margin: 12px 0;
}
.product-sppdetails {
  padding: 10px 12px;
  box-sizing: border-box;
  border-radius: 8px;
  /* margin-top: 18px; */
  background: #ffffff;
}
.sppdetails-lis {
  display: flex;
  font-size: 14px;
  margin: 18px 0px;
}
.sppdetails-lis span {
  color: #b3b3b3;
  width: 72px;
}
.sppdetails-lis p {
  height: 20px;
  margin-left: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-wrap: break-word;
}
.photo-details {
  margin-top: 18px;
  font-size: 0px;
}
.shop-car,
.pay-sucess {
  position: fixed;
  bottom: 17px;
  /* width: 80%; */
  width: 377px;
  height: 45px;
  line-height: 45px;
  background: #ffffff;
  border-top: 1px solid #e6e6e6;
}
.pay-sucess {
  display: flex;
  justify-content: space-between;
  /* margin: 10px; */
  padding: 0 10px;
  box-sizing: border-box;
}
.shop-carbox {
  display: flex;
  /* justify-content: space-around; */
  justify-content: space-between;
  margin: 0 12px;
}
.car-p {
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-wrap: break-word;
}
.penson-message,
.order-information,
.pay-way {
  background: #ffffff;
  border-radius: 8px;
  width: 100%;
  margin: 8px 0;
  padding: 8px;
  box-sizing: border-box;
}
.penson-message {
  position: relative;
}
.line-info {
  position: absolute;
  bottom: 0;
  width: 96%;
  height: 198rpx;
  border-radius: 24rpx 24rpx 0 0;
  background: #fff;
  padding: 26rpx 49rpx 0 34rpx;
}
.line-info::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: repeating-linear-gradient(
    -45deg,
    #ff6c6c,
    #ff6c6c 20%,
    transparent 0,
    transparent 25%,
    #1989fa 0,
    #1989fa 45%,
    transparent 0,
    transparent 50%
  );
  background-size: 78px;
  content: "";
}
.pay-pop {
  padding: 8px;
  background: #f5f6f9;
  color: #000;
  font-size: 14px;
}
.store-size {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.store-information {
  display: flex;
  justify-content: space-between;
  margin: 3px 0;
}
.presenter {
  font-size: 12px;
  color: #b4b2b2;
}
.product-information {
  display: flex;
}
.product-picture {
  width: 75px;
  height: 75px;
  border-radius: 5px;
}
.product-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-wrap: break-word;
  font-weight: 600;
  font-size: 13px;
}
.product-price {
  font-size: 16px;
}
.freight {
  margin-top: 10px;
}
.freight,
.notes {
  height: 35px;
  font-size: 1px;
  line-height: 35px;
}
.notes {
  display: flex;
  justify-content: space-between;
}
.notes-word .el-input__inner {
  border: none;
  padding: 0;
}
.exemption,
.notes-word {
  float: right;
  font-weight: 600;
}
.notes-word {
  width: 195px;
}
.ailpay-size {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.payment-radio {
  position: absolute;
  right: 14px;
  /* top: 50%; */
  margin-top: 4px;
}
.guarantee-drawer {
  position: relative;
  width: 377px;
  /* left: 0; */
  right: 53px;
  bottom: 30px;
}
.guarantee {
}
.el-drawer.btt,
.el-drawer.ttb {
  /* position: absolute;
  width: 377px;
  right: 53px;
  bottom: 30px; */
  border-radius: 8px 8px 0;
  position: absolute;
  width: 377px;
  left: unset;
  right: 53px;
  bottom: 0;
}
.address-select {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.address-more {
  /* float: right; */
  position: absolute;
  /* top: -5px; */
  margin-top: -6px;
  font-weight: 600;
  right: 10px;
  color: #4d4d4d;
}
.delivery-address {
  background: #fff;
  height: 36px;
  line-height: 36px;
  font-size: 15px;
  padding-left: 10px;
}
.address-box {
  background: #fff;
  margin: 10px;
  padding: 8px 12px;
  box-sizing: border-box;
  border-radius: 8px;
  display: flex;
  align-items: center;
}
.address-box:hover {
  background: #c6c6c6;
}
.detail-address {
  line-height: 1.6;
  width: 92%;
}
.check-address {
  color: red;
  font-weight: bolder;
  margin-left: 8px;
}
.submit-order .el-icon-shopping-cart-2:before {
  font-size: 14px;
  margin-right: 3px;
}
</style>
